<template>
  <div id="drawContainer" class="drawContainer">
    <Modal
      :options="getModalOptions"
      :on-positive-click="handleConfirm"
      :on-negative-click="handleClose"
      :on-close="handleClose"
      :z-index="2222"
    >
      <template #Context>
        <n-form
          ref="formRef"
          :model="userForm"
          :rules="userRules"
          :label-width="80"
          label-placement="left"
          require-mark-placement="left"
        >
          <template v-for="(item,index) in getFormOptions" :key="index">

            <n-form-item v-if="item.type === 'oss'" :label="item.label" :path="item.key">
              <fileOss :key-name="'imgList'" :limit="9" :default-list="userForm[item.key]" @upload-status="statusfile" />
            </n-form-item>

            <n-form-item v-if="item.type == 'select'" :label="item.label" :path="item.key">
              <n-select v-model:value="userForm[item.key]" v-bind="item.props" />
            </n-form-item>

            <n-input-group v-if="item.type == 'inputGroup'" class="inputGroup">
              <n-form-item v-for="(it, i) in item.values" :key="(it.key + i)" :label="it.label" :path="it.key">
                <n-input-number v-model:value="userForm[it.key]" :class="'mapInput' + i" v-bind="it.props" />
              </n-form-item>
            </n-input-group>

          </template>
        </n-form>
      </template>
    </Modal>
  </div>
</template>

<script setup name="DrawComp">
import { ref, reactive, computed } from 'vue'
import GMap from '@/utils/map/GMap'
import fileOss from '@/components/UploadOss/fileUploadOss.vue'
import { form } from '../tools/form'

const props = defineProps({
  detail: {
    type: Object,
    required: true
  }
})

const { userForm, userRules, formItem } = form

const getFormOptions = reactive({
  ...formItem
  // ...props.detail
})

const minMap = ref(null)
GMap.then((AMap) => {
  minMap.value = new AMap.Map('drawContainer', {
    zoom: 13,
    center: props.detail.lnglat ?? [118.773319, 31.828123]
  })
}).catch(e => console.log(e))

const fileStatus = ref('')
const statusfile = async(status, list) => {
  fileStatus.value = status
  // if (status === 'success') {
  //   data.userForm = {
  //     ...data.userForm,
  //     ...list
  //   }
  // } else {
  //   data.userForm = {
  //     ...data.userForm,
  //     list
  //   }
  // }
}

const modalShow = ref(true)
const getModalOptions = computed(() => {
  return {
    show: modalShow.value,
    title: '问题确认',
    negativeText: '取消',
    positiveText: '确认'

  }
})

// 模态框 确定
const formRef = ref(null)
const handleConfirm = () => {
  formRef.value?.validate().then(() => {
    handleClose()
  })
}

// 模态框 关闭
const handleClose = () => {
  modalShow.value = false
}

</script>

<style lang="scss" scoped>
.drawContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.inputGroup {
  .mapInput0 {
    margin-right: 20px;
  }

  :deep(.n-base-icon) {
    display: none;
  }
  :deep(.n-input__suffix) {
    display: none;
  }
}

</style>
